<!-- 添加物业 -->
<template>
	<div class="">
		<el-dialog title="添加物业公司" :visible.sync="dialogVisible" width="1000px" top="20px" :before-close="handleClose" :close-on-click-modal="false">
			<div class="el-dialog-view" style="display: flex;justify-content: space-between;">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
					<el-form-item label="物业公司名称" prop="wy_name"><el-input v-model="ruleForm.wy_name"></el-input></el-form-item>
					<el-form-item label="物业公司简称" prop="introduce"><el-input v-model="ruleForm.introduce"></el-input></el-form-item>
					<el-form-item label="公司地址" prop="address"><el-input v-model="ruleForm.address"></el-input></el-form-item>
					<el-form-item label="公司电话" prop="tel"><el-input v-model="ruleForm.tel"></el-input></el-form-item>
					<el-form-item label="登录账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item>
					<el-form-item label="登录密码" prop="password"><el-input v-model="ruleForm.password"></el-input></el-form-item>
					<el-form-item label="联系人" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
					<el-form-item label="服务号类型" prop="qy_wx_account_type">
					    <el-select v-model="ruleForm.wx_account_type" placeholder="请选择">
					      <el-option label="自有服务号" value="1"></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item label="企业号类型" prop="qy_wx_account_type">
					    <el-select v-model="ruleForm.qy_wx_account_type" placeholder="请选择">
					      <el-option label="自有企微(企业号)" value="1"></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
					<el-form-item label="应用管理" prop="qy_wx_account_type">
					  <el-tree style="max-height: 500px;overflow-y: auto;width: 300px;"
						ref="tree"
						:data="routesData"
						:check-strictly="checkStrictly"
						:props="defaultProps"
						show-checkbox
						node-key="id"
						class="permission-tree"
					/>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Api from '@/api/pages/wuye/wuye.js';
import appApi from '@/api/pages/application-center/index.js';

export default {
	name: 'wuye-list-add',
	props: {
		data: Object
	},
	data() {
		return {
			dialogVisible: true,
			ruleForm: {
				username:'',
				introduce:'',
				tel:'',
				address:'',
				wy_name:'',
				password:'',
				name:'',
				wx_account_type:'1',
				qy_wx_account_type:'1'
			},
			rules: {
				wy_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
				introduce: [{ required: true, message: '不能为空', trigger: 'blur' }],
				address: [{ required: true, message: '不能为空', trigger: 'blur' }],
				tel: [{ required: true, message: '不能为空', trigger: 'blur' }],
				username: [{ required: true, message: '不能为空', trigger: 'blur' }, { min: 3, max: 12, message: '请填写3-12位数字、字母、下划线', trigger: 'blur' }],
				password: [{ required: true, message: '不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '不能为空', trigger: 'blur' }],
				wx_account_type: [{ required: true, message: '不能为空', trigger: 'change' }],
				qy_wx_account_type: [{ required: true, message: '不能为空', trigger: 'change' }],
			},
			checkStrictly:false,

			defaultProps: {
				children: 'children',
				label: 'app_name'
			},
			routesData: [],
			ids:[],
			appidObj:{},

		};
	},
	mounted() {

		this.getAppList();
	},
	methods: {
		// 获取应用
		getAppList() {
			appApi.query().then(res => {
				// if (res.state) {
					let obj = {};
					res.list.forEach(item => {
						item.id = item.app_id;
						this.appidObj[item.id] = [];
						obj[item.id] = item;
						if(item.children && item.children.length) {
							delete obj[item.id]
							item.children.forEach(item1 => {
								obj[item1.id] = item1;
								if(item1.children && item1.children.length) {
									delete obj[item1.id]
									item1.children.forEach(item2 => {
										obj[item2.id] = item2;
									})
								}
							})
						}
					});
					this.routesData = res.list;
					console.log(res.data)
					let routeIdList = [];
					console.log(this.ids)
					this.ids.forEach(item => {
						if (item && obj[item]) {
							routeIdList.push({ id: item });
						}
					});
					this.$nextTick(() => {
						const routes = routeIdList;
						this.$refs.tree.setCheckedNodes(routes);
					});
			});
		},
		confirmRole() {
			this.appidObj = {};
			const checkedKeysarr = this.$refs.tree.getCheckedNodes(false,true);
			checkedKeysarr.forEach(item => {
				if(item.id != item.app_id) {
					if(this.appidObj[item.app_id]) {
						this.appidObj[item.app_id].push(item.id)
					}else{
						this.appidObj[item.app_id]= [item.id]
					}
				}
			})
			let data = [];
			for (let key in this.appidObj) {
				if(this.appidObj[key] && this.appidObj[key].length) {
					let item = {
						app_id:key,
						app_rel_id:this.appidObj[key].join()
					}
					data.push(item)
				}
			}
			return data;
		},
		handleClose() {
			this.$emit('close');
		},
		save() {
			let data = {};
			data['info.wy_name'] = this.ruleForm.wy_name;
			data['info.introduce'] = this.ruleForm.introduce;
			data['info.address'] = this.ruleForm.address;
			data['info.tel'] = this.ruleForm.tel;
			data['username'] = this.ruleForm.username;
			data['password'] = this.ruleForm.password;
			data['name'] = this.ruleForm.name;
			data['info.wx_account_type'] = this.ruleForm.wx_account_type;
			data['info.qy_wx_account_type'] = this.ruleForm.qy_wx_account_type;
			data['set_app_info'] = JSON.stringify(this.confirmRole());
			console.log(data)
			Api.save(data).then(res => {
				if (res.state) {
					this.$message({
					  message: res.msg,
					  type: 'success'
					});
					this.$parent.getData();
					this.$emit('close');
				} else {
					this.$message(res.msg);
				}
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.save()
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>
<style lang="scss" scoped>
.el-dialog-view {
	padding: 10px 30px;
	border: 1px solid #bbb;
	min-height: calc(100vh - 150px);
}
.info-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}
</style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
